<template>
	<view class="page">

		<!-- 视频播放start -->
		<view class="player">
			<video :src="movie.trailer" :poster="movie.poster" class="movie"  id="video"></video>
		</view>
		<!-- 视频播放end -->

		<!-- 影片基本信息start -->
		<view class="movie-info">
			<!-- //路由跳转 -->
			<navigator :url="'../cover/cover?cover='+movie.cover">
				<image :src="movie.cover" class="cover"></image>
			</navigator>
			<view class="movie-right">
				<view class="name">{{movie.name}}</view>
				<view class="basic-info">
					<view class="basicInfo">{{movie.basicInfo}}</view>
					<view class="originalName">{{movie.originalName}}</view>
					<view class="totalTime">{{movie.totalTime}}</view>
					<view class="releaseDate">{{movie.releaseDate}}</view>
				</view>
				<view class="score-block">
					<view class="big-score">
						<view class="score-words">综合评分：</view>
						<view class="movie-score">{{movie.score}}</view>
					</view>
					<view class="score-stars">
						<block v-if="movie.score>=0"></block>
						<traclerstar :innerscore="movie.score" showNum="0"></traclerstar>
						<view class="prisedCounts">{{movie.prisedCounts}}人点赞</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 影片基本信息end -->

		<!-- 线条 -->
		<view class="line-wrapper">
			<view class="line"></view>
		</view>

		<!-- 剧情介绍start -->


		<view class="plots-block">
			<view class="plots-title">剧情介绍</view>
			<view class="plots-desc">{{movie.plotDesc}}</view>

		</view>
		<!-- 剧情介绍end -->

		<!-- 演职人员start -->
		<view class="scroll-block">
			<view class="plots-title">演职人员</view>
			<scroll-view scroll-x class="scroll-list">

				<!-- 导演 -->
				<view class="actor-wrapper" v-for="(item,staffIndex) in directorArr" :key='staffIndex'>
					<image :src="item.photo" class="single-actor" mode="aspectFill" @click="lookstaffs" :data-staffIndex="staffIndex"></image>
					<view class="name">{{item.name}}</view>
					<view class="actName">饰 {{item.actName}}</view>
				</view>

				<!-- 演员 -->
				<view class="actor-wrapper" v-for="(item,actorIndex) in actorArr" :key='actorIndex'>
					<image :src="item.photo" class="single-actor" mode="aspectFill" @click="lookstaffs" :data-staffIndex="actorIndex+directorArr.length"></image>
					<view class="name">{{item.name}}</view>
					<view class="actName">{{item.actName}}</view>
				</view>



			</scroll-view>
		</view>

		<!-- 演职人员end -->

		<!-- 剧照start -->

		<view class="scroll-block">
			<view class="plots-title">剧照</view>
			<scroll-view scroll-x class="scroll-list">
				<image v-for="(item,index) in plotPicsArr" :key='index' :src="item" class="plot-img" mode="aspectFill" @click="lookMe"
				 :data-imgIndex="index">
				</image>
			</scroll-view>
		</view>
		<!-- 剧照end -->


	</view>
</template>

<script>
	import traclerstar from '../../components/traclerstar.vue';
	export default {
		data() {
			return {
				movie: {},
				plotPicsArr: [], //剧照
				directorArr: [], //演员
				actorArr: [] //导演
			}
		},
		
		 //操作视频对象，小程序里面点击图片时视频暂停播放
		//页面初次渲染完成，获得视频上下文对象
		onReady(){
			var me=this;
			me.videoContext=uni.createVideoContext('video');
		},
		onHide(){
			//页面被隐藏的时候暂停播放
			this.videoContext.pause();
		},
		onShow(){
			//页面被显示的时候，可以继续播放
			if(this.videoContext){
				this.videoContext.play();
			}
			
		},
		onLoad(params) {

			// debugger
			//详情接口
			var me = this;
			//接收另一个页面跳转带过来的参数
			var trailerId = params.trailerId;
			// console.log(trailerId)

			// 通过api修改导航栏的属性
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#000000",
			})

			uni.request({
				url: "https://www.imovietrailer.com/superhero/search/trailer/" + trailerId + "/?qq=lee57837906",
				data: {
					qq: "lee32406173"
				},
				method: 'POST',
				success: (res) => {
					if (res.statusCode == 200) {
						me.movie = res.data.data
						// console.log(me.movie);

						//把剧照的字符串转换为json array
						var plotPicsArr = JSON.parse(me.movie.plotPics);
						me.plotPicsArr = plotPicsArr
					}
				}
			});
			//获取导演
			uni.request({
				url: "https://www.imovietrailer.com/superhero/search/staff/" + trailerId + "/1/?qq=lee57837906",
				data: {
					qq: "lee32406173"
				},
				method: 'POST',
				success: (res) => {
					if (res.statusCode == 200) {
						me.directorArr = res.data.data
						// debugger

					}
				}
			});
			//获取演员

			uni.request({
				url: "https://www.imovietrailer.com/superhero/search/staff/" + trailerId + "/2/?qq=lee57837906",
				data: {
					qq: "lee32406173"
				},
				method: 'POST',
				success: (res) => {
					if (res.statusCode == 200) {
						me.actorArr = res.data.data
						// debugger
					}
				}
			});
		},
		methods: {
			lookMe(e) {
				var me = this;
				var imgIndex = e.currentTarget.dataset.imgindex;

				uni.previewImage({
					current: me.plotPicsArr[imgIndex],
					urls: this.plotPicsArr
				})

			},
			lookstaffs(e) {
				var me = this;
				var staffIndex = e.currentTarget.dataset.staffindex;

				//凭接导演和演员的数组，成一个新数组
				var directorArr = me.directorArr;
				var actorArr = me.actorArr;
				var newstaffArr = [];
				newstaffArr = newstaffArr.concat(directorArr).concat(actorArr);
				var urls = [];
				for (var i = 0; i < newstaffArr.length; i++) {
					var tempPhoto = newstaffArr[i].photo;
					urls.push(tempPhoto);
				}
				
				uni.previewImage({
					// current:me.plotPicsArr是图片数组  [staffIndex] e.currentTarget.dataset.staffindex;
					current: urls[staffIndex],
					urls: urls
				})

			}
		},
		components: {
			traclerstar
		},
		//  微信分享  此函数仅仅只支持在小程序端的分享，微信群，或者微信好友
		onShareAppMessage(res) {
			var me = this;
			return {
				title: me.movie.name,
				path: '/pages/movie/movie?trailerId=' + me.movie.id
			}

		},
		
		//分享到朋友圈   只能手机端
		onNavigationBarButtonTap(e) {
			var index = e.index;
			// console.log(index);
			var me=this;
			var movie=me.movie;   //拿到每一个对象
			var trailerId=movie.id;  //拿到id
			var trailerName=movie.name; //拿到名字
			var cover=movie.cover;  //拿到图片
			var poster=movie.poster;  //拿到标题图片
			if (index == 0) {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: "http://localhost:8080/#/pages/movie/movie?trailerId="+trailerId,
					title: "超英预告：《'+trailerName+'》",
					summary: "超英预告：《'+trailerName+'》",
					imageUrl: "cover",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					}
					
				});
			}
		}
	}
</script>

<style>
	@import url("movie.css");
</style>
